<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav">
				<scroll-view :scroll-x="true">
					<view :class="{'s-flex': levelState.length < 5}">
						<view class="nav-item u-flex-col u-flex-1 u-col-center"
							v-for="nav in levelState"
							:key="nav.level"
							@tap="onNav(nav.level)">
							<view class="item-title">
								{{ nav.name }}({{nav.num}})
							</view>
							<view class="nav-line"
								:class="{ 'line-active': level === nav.level }"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="search-box">
				<view style="width: 100%;"
					class="u-flex">
					<view style="min-width: 200rpx;max-width: 200rpx;width:200rpx;">
						<uni-data-select v-model="status"
							:localdata="statusOption"
							@change="statusChange"
							:clear="false"></uni-data-select>
					</view>
					<view class="u-flex-1 u-m-l-20">
						<u-search placeholder="请输入学校/姓名/手机号搜索"
							v-model="keyword"
							:show-action="false"
							:height="70"
							@search="doSearch"
							shape="square"></u-search>
					</view>
				</view>
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true"
				enable-back-to-top
				@scrolltolower="loadMore"
				class="scroll-box">
				<!-- 我的上级 -->
				<view class="parent-user"
					v-if="parentUser">
					<view>我的推荐人</view>
					<view class="u-flex u-m-t-20">
						<view class="avatar">
							<image :src="parentUser.user.avatar"
								mode="aspectFill"></image>
						</view>
						<view class="nickname">{{parentUser.user.nickname}}</view>
						<view class="level-tag">
							{{parentUser.level.name}}
						</view>
					</view>
				</view>
				<!-- 订单列表 -->
				<view class="team-list">
					<view class="item"
						v-for="(item, index) in teamList"
						:key="index">
						<view class="u-flex user">
							<view class="avatar">
								<image :src="item.user.avatar"
									mode="aspectFill"></image>
							</view>
							<view class="u-flex-1 u-flex">
								<view class="nickname">{{item.user.nickname}}</view>
								<view class="level-tag">
									{{item.level.name}}
								</view>
							</view>
							<view class="all-msg u-flex font-OPPOSANS"> 状态： <text class="text-green"
									v-if="item.status == 'normal'">
									{{item.status_text}}
								</text>
								<text class="text-red"
									v-else>
									{{item.status_text}}
								</text>
							</view>
						</view>
						<view class="info">
							<view class="row u-flex"
								v-for="(itemInfo,indexIndex) in item.apply_info"
								:key="indexIndex">
								<view class="label">
									{{itemInfo.name}}：
								</view>
								<view class="value u-flex-1 u-p-l-20">
									<image v-if="itemInfo.type == 'image'"
										:src="$BASE_URL + itemInfo.value"
										mode="aspectFill"
										class="pic"
										@click="previewPic($BASE_URL + itemInfo.value)"></image>
									<view v-else>
										{{itemInfo.value}}
									</view>
								</view>
							</view>
							<view class="row u-flex">
								<view class="label"> 注册时间： </view>
								<view class="value">
									{{item.createtime_text}}
								</view>
							</view>
							<view class="row u-flex">
								<view class="label"> 直推人数： </view>
								<view class="value">
									{{item.child_agent_count_1}}人
								</view>
							</view>
							<view class="row u-flex">
								<view class="label"> 累计收益： </view>
								<view class="value">
									{{item.total_income}}元
								</view>
							</view>
							<view class="row u-flex">
								<view class="label"> 直推分销业绩： </view>
								<view class="value">
									{{item.order_money}}元/{{item.order_count}}单
								</view>
							</view>
							<view class="row u-flex">
								<view class="label"> 团队分销业绩： </view>
								<view class="value">
									{{item.child_order_money}}元/{{item.child_order_count}}单
								</view>
							</view>
						</view>
						<view class="team-bottom u-flex u-row-center">
							<view class="btn-box u-flex"
								v-if="item.status == 'pending'">
								<button @tap.stop="onExamine(index,0)"
									class="u-reset-button obtn1">驳回申请</button>
								<button @tap.stop="onExamine(index,1)"
									class="u-reset-button obtn2">审核通过</button>
							</view>
							<view class="btn-box u-flex"
								v-else-if="item.status == 'normal'">
								<button @tap.stop="goTeam(item.user_id)"
									class="u-reset-button obtn2">查看团队</button>
								<button
									@tap.stop="$Router.push({ path: '/pages/app/commission/order', query: { user_id: item.user_id,name: item.user.nickname } })"
									class="u-reset-button obtn2">团队订单</button>
								<button @tap.stop="$Router.push({ path: '/pages/app/commission/statistics', query: { user_id: item.user_id,name: item.user.nickname } })"
									class="u-reset-button obtn2">业绩报表</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 空白页 -->
				<!-- 缺省页 -->
				<shopro-empty v-if="isEmpty"
					marginTop="50rpx"
					:image="$IMG_URL + '/imgs/empty/no_team.png'"
					tipText="暂无团队人员"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="teamList.length"
					height="80rpx"
					:status="loadStatus"
					icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				level: '',
				teamList: [],
				levelState: [],
				parentUser: '',
				keyword: '',
				status: '',
				statusOption: [{
					text: '全部',
					value: ''
				}, {
					text: '审核中',
					value: 'pending'
				}, {
					text: '正常',
					value: 'normal'
				}, {
					text: '驳回',
					value: 'reject'
				}],
				user_id: ''
			};
		},
		onLoad(options) {
			this.user_id = options.user_id
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
			this.teamList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getTeamList();
		},
		onShow() {},
		methods: {
			goTeam(user_id) {
				uni.navigateTo({
					url: '/pages/app/commission/team?user_id=' + user_id
				})
			},
			onExamine(index, type) {
				let that = this
				let status = ''
				let status_text = ''
				let msg = ''
				if (type == 1) {
					status = 'normal'
					status_text = '正常'
					msg = '确认通过审核吗'
				} else {
					status = 'reject'
					status_text = '审核驳回'
					msg = '确认驳回申请吗'
				}
				uni.showModal({
					title: '申请审核',
					content: msg,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							that.$http('commission.examine', {
								user_id: that.teamList[index].user_id,
								status
							}, '审核中...').then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.teamList[index].status = status
									that.teamList[index].status_text = status_text
								}
							});
						}
					}
				});
			},
			statusChange() {
				this.doSearch()
			},
			previewPic(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// tab切换
			onNav(level) {
				if (this.level !== level) {
					this.level = level;
					this.teamList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getTeamList();
				}
			},
			doSearch() {
				this.teamList = [];
				this.currentPage = 1;
				this.lastPage = 1;
				this.getTeamList();
			},
			// 团队列表
			getTeamList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('commission.team', {
					level: that.level,
					page: that.currentPage,
					keyword: that.keyword,
					status: that.status,
					user_id: that.user_id
				}, '加载中...').then(res => {
					if (res.code === 1) {
						let teamList = []
						res.data.teams.data.map((item) => {
							item.apply_info = JSON.parse(item.apply_info)
							teamList.push(item)
						})
						that.teamList = [...that.teamList, ...teamList];
						that.isEmpty = !that.teamList.length;
						that.lastPage = res.data.teams.last_page;
						that.loadStatus = that.currentPage < res.data.teams.last_page ? 'loadmore' : 'nomore';
						that.levelState = res.data.level_list
						that.parentUser = res.data.parent_user || ''
						if (that.user_id) {
							let title = res.data.user.nickname
							if (title.length > 10) {
								title = title.slice(0, 10)
								title += "..."
							}
							uni.setNavigationBarTitle({
								title: title + "的团队"
							})
						}
					}
				});
			},
			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getTeamList();
				}
			},
			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
								id: orderId
							}, '删除中...').then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},
			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				that.$http('order.cancel', {
					id: id
				}, '取消中...').then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.orderList.splice(orderIndex, 1);
					}
				});
			},
			// 立即购买
			onPay(id) {
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				});
			},
			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.team-bottom {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px solid #f7f7f7;

		.btn-box {
			justify-content: flex-end;

			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 40rpx;
				padding: 0;
			}

			.obtn2 {
				width: 160rpx;
				line-height: 60rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 30rpx;
				margin-right: 40rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}
	}

	.info {
		margin-top: 20rpx;

		.row {
			padding: 6rpx 0;

			.pic {
				width: 60rpx;
				height: 60rpx;
			}

			.label {
				color: #676767;
			}
		}
	}

	.nickname {
		margin: 0 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 300rpx;
	}

	.level-tag {
		background: #feb333;
		display: inline-block;
		color: #fff;
		padding: 4rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		transform: scale(.8);
	}

	.team-list {
		.item {
			background: #fff;
			margin: 30rpx;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 20rpx;

			.user {
				border-bottom: 1px solid #f7f7f7;
				padding-bottom: 20rpx;

				.avatar {
					image {
						width: 60rpx;
						height: 60rpx;
						display: block;
					}
				}
			}
		}
	}

	.parent-user {
		background: #fff;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;

		.avatar {
			image {
				width: 60rpx;
				height: 60rpx;
				display: block;
			}
		}
	}

	.head_box {
		background: #fff;
		padding-bottom: 10rpx;

		.search-box {
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx;
		}
	}

	.order-nav {
		background: #fff;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		scroll-view {
			white-space: nowrap; //scroll-view元素
			padding: 0 10rpx;

			.s-flex {
				display: flex;
			}
		}

		.nav-item {
			flex: 1;
			display: inline-block; //子元素
			padding: 0 20rpx;
			text-align: center;

			.item-title {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 50%;
				height: 4rpx;
				background: #fff;
				margin-left: 25%;
			}

			.line-active {
				background: rgba(230, 184, 115, 1);
			}
		}
	}
</style>